<template>
<div class="col-md-12">
  <form class="form-inline" style="text-align:left;display: none">
  <label for="name">&nbsp;设备编号:</label>
  <input type="text" class="form-control" id="usnameval" placeholder="请输入设备编号" >
  <label for="name">&nbsp;类型:</label>
 <select  id="typecx" class="form-control"><option value="">--全部-</option> 
<option value="0">单色</option> 
  <option value="1">双色</option>
  <option value="2">全彩</option> 
  <option value="3">安卓</option>
	</select>
<button type="button" class="btn btn-primary">查询</button>
   <!--<button type="button" class="btn btn-primary"  >开启</button>
 <button type="button" class="btn btn-primary" id="add"  data-toggle="modal" data-target="#myModal">关闭</button>!-->
  <button type="button" class="btn btn-success" id="update" style="display:none"  data-toggle="modal" data-target="#myModal">新增</button>
  </form>
<b></b>
<div  class="col-md-6 allmap"  style="margin:5px 0"  id="map_canvas">  </div>
  </div>
</template>
<script>
import '../../../../static/js/jqgrid/jquery.jqGrid.min.js';
import '../../../../static/js/jqgrid/grid.locale-cn.js';
import '../../../../static/js/jqgrid/jquery.jqGrid.min.js';
import '../../../../static/js/jqgrid/grid.locale-cn.js';
import func from './vue-temp/vue-editor-bridge.js';
//坐标转换完之后的回调函数
export default {
 data() {
  return {
   
  };
 },
 created () {
    
 },
 methods: {
        //坐标转换完之后的回调函数
 },
 mounted() {
  this.$nextTick(function() {
    //  alert( this.drawMap());
  // this.drawMap();
 });
 }
};

</script>
<script>
$(function(){

$(".btn-primary").click(function(){

   
  init();  //异步加载地图

});
});

    //百度地图API功能
    window.loadJScript=function(){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=2pxYNNwIfR34G5mLT1BhMP40&callback=init";
        document.body.appendChild(script);
    };
     var map,
        baidu_tmp_data = new Array(),
        opts = {
        width : 250,     // 信息窗口宽度
        height: 140,     // 信息窗口高度
        title : "设备信息" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:""
    };
    window.init=function() {
    baidu_tmp_data = new Array(),
        opts = {
        width : 0,     // 信息窗口宽度
        height: 0,     // 信息窗口高度
        title : "" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:""
    };
   
        map = new BMap.Map("map_canvas");            // 创建Map实例
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom("深圳",15);
        map.enableScrollWheelZoom();                 //启用滚轮放大缩小
        //var result = ajaxGetData()
        //DeviceManagement/queryDeviceGPRSInfo 参数 companyId 公司id ，devicenumber设备号，deviceType 设备类型 
     var tmp = new Array();
    $.ajax({
    type: "POST",
    url: domain.testUrl+"/Threeinjection/DeviceManagement/queryDeviceGPRSInfo?companyId"+sessionStorage.getItem("sid")+"&devicenumber="+$("#usnameval").val()+"&deviceType="+$("#typecx").val(),
    data:{sessionid:sessionStorage.getItem("sid")},
    success: function (response) {
      var  data=JSON.parse(response);
     data=[{"type":2,"devicenumber":"19022074G002","high":32,"isonline":0,"s":0,"lastonlinetime":1562663555000,"latitude":22.639482,"longitude":113.937496,"maxPSDnum":0,"maxprogramnum":0,"maxregionnum":0,"status":0,"width":160},
     {"type":3,"devicenumber":"19022074G003","high":32,"isonline":0,"s":0,"lastonlinetime":1562663555000,"latitude":22.615997,"longitude": 114.034081,"maxPSDnum":0,"maxprogramnum":0,"maxregionnum":0,"status":0,"width":160}]
      //  console.log(response);

        if(data.length < 0){

            return false;
        }
        var data_len = data.length;
        for(var i=0;i<data_len; i++){
                tmp.push(new BMap.Point(data[i]["longitude"],data[i]["latitude"]));
                      baidu_tmp_data.push(tmp[i]);
           
        }
          //   alert(tmp.length);
             var converor = new BMap.Convertor();
            //converor.translate(tmp,1,5,translateCallback);
        setTimeout(function(){
           var center;
           var marker=""; var myIcon="";
           for(var i=0;i<baidu_tmp_data.length;i++){
       //var type=data[i]["type"]=="0"?"单色":data[i]["type"]=="1"?"双色":"全彩";
 var date = new Date(data[i]["lastonlinetime"])
                            date=typeof(data[i]["lastonlinetime"])!="undefined"?date.Format("yyyy-MM-dd hh:mm:ss"):"";
            var tmp = "";
            //    tmp += '<p class="line"><span>设备号：</span>'+data[i]["devicenumber"]+'</p>';
            //     tmp += '<p class="line"><span>类型：</span>'+type+'</p>';
            //     tmp += '<p class="line"><span>分辨率：</span>'+data[i]["width"]+"*"+data[i]["high"]+'</p>';
            //      tmp += '<p class="line"><span>最后在线时间：</span>'+date+'</p>';
            //        tmp += '<p class="line"><span>精度：</span>'+data[i]["longitude"]+'</p>';
            //          tmp += '<p class="line"><span>维度：</span>'+data[i]["latitude"]+'</p>';
            //    tmp += '<p class="line"><span>状态：</span>';
               
            //    if(parseInt(data[i]["isonline"]) == 1){
            //        tmp += '在线';
            //    }else{
            //        tmp += '离线';
            //    }
            //    tmp += '</p>';
              if(data[i]["type"].toString()=="2"){
                
               var table="<table width='263' height='306'  background='static/img/ejyd.png' style='background-size:100% 100%;background-repeat:no-repeat;'><tr><td  style='font-size:30px;color:#ffff;text-align: center;width:62%;'><b>测试一路</b></td><td style='font-size:27px;color:red;'><p>12</p></td></tr><tr><td  style='font-size:30px;color:#ffff;text-align: center;'><b>测试一路</b></td><td style='font-size:27px;color:red;'><p>12</p></td></tr><tr><td  style='font-size:30px;color:#ffff;text-align: center;'><b>测试一路<b></td><td style='font-size:27px;color:red;'><p>12</p></td></tr><tr style='height:17%;'><td colspan=2 style='font-size:30px;color:#ffff;text-align: center;'>测试一路</td></tr></table>";

               tmp="<div><b style='font-size:32px;'>"+data[i]["devicenumber"]+"</b><br>"+table+"</div>";
              }
               if(data[i]["type"].toString()=="3"){
                 
                  var table="<table width='260' height='143' style='background-size:100% 100%;background-repeat:no-repeat;' background='static/img/sjyd.png'> <tr><td  style='font-size:30px;color:#ffff;text-align: center;width:62%;'><b>测试一路</b></tr><tr style='height:40%;'><td style='font-size:27px;color:red;padding-left: 57%;'><p>12</p></td></tr></table>";
                  


  tmp="<div><b style='font-size:32px;'>"+data[i]["devicenumber"]+"</b><br>"+table+"</div>";
               }
                 if(parseInt(data[i]["isonline"]) == 1){
                  	  myIcon = new BMap.Icon("static/img/tzx.png", new BMap.Size(32,32));
                	  marker = new BMap.Marker(baidu_tmp_data[i],{icon:myIcon});
             }else{
             	  myIcon = new BMap.Icon("static/img/tlx.png", new BMap.Size(32,32));
             	  marker = new BMap.Marker(baidu_tmp_data[i],{icon:myIcon});
             }
               map.addOverlay(marker);
               addClickHandler(tmp,marker);
               center = baidu_tmp_data[i];
                var label = new BMap.Label("<b style='font-size:15px;'>"+data[i]["devicenumber"]+"</b>",{offset:new BMap.Size(20,-10)});
	            marker.setLabel(label);
           }
            map.panTo(center);
        },500);
          }
          });
    }
    window.addClickHandler=function(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    window.openInfo=function(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }
    //坐标转换完之后的回调函数
    window.translateCallback = function (data){
     ;
        if(data.status === 0) {
            for(var i=0;i<data.points.length;i++){
                baidu_tmp_data.push(data.points[i]);
            }
        }
    }
     window.onload = loadJScript;  //异步加载地图
    Date.prototype.Format = function(fmt)   
{ 
//author:wangweizhen
  var o = {   
    "M+" : this.getMonth()+1,                 //月份   
    "d+" : this.getDate(),                    //日
    "h+" : this.getHours(),                   //小时   
    "m+" : this.getMinutes(),                 //分   
    "s+" : this.getSeconds(),                 //秒   
    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
    "S"  : this.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  return fmt;   
}

</script>
<style scoped>
.allmap {
 width: 100%;
height: 675px;
 font-family: "微软雅黑";
 border: 1px solid green;
}
.el-tag {
 cursor: pointer;
}
ld{
   font-size:20px;
   color:#ffff;
}
</style>
<style>
table td{

    border:0px solid #F00
}

ldcw{

    
}
.allmap label{max-width:none;}
</style>


